<template>
	<view>
		<view class="swiper_view">
			<swiper class="swiper"  :autoplay="true" :circular="true" :interval="3000" :duration="1000" @change="swiper_change">
				<swiper-item v-for="(item,index) in list">
					<image :src="ImgUrl+item" mode="" class="swiper_img"></image>
				</swiper-item>
			</swiper>
			<view class="swiper_currentNum">
				{{currentNum}}/{{list.length}}
			</view>
		</view>
		<view class="content">
			<view class="list_item_price">
				{{jifen}}
				<text class="fs-28">积分</text>
				<text style="margin: 0 10rpx;">+</text>
				{{ jiage | pointsPrice }}
				<text class="fs-28">.{{ jiage | pointsPrice(1) }}</text>
				<text class="fs-28">元</text>
			</view> 
			<view class="list_item_right_title line-2">
				{{name}}
			</view>
			<view class="yf_view flex">
				<view class="yf">
					运费{{fare}}元
				</view>
				<view class="yf">
					销量{{sold_num}}
				</view>
				<view class="yf">
					库存{{stock_num}}
				</view>
			</view>
			<!-- <view class="shuoming flex">
				<view class="shuoming_left flex1">
					<view class="shuoming_left_left">
						主治功能
					</view>
					<view class="shuoming_left_right">
						普通感冒；流行性感冒
					</view>
				</view>
				<view class="shuoming_left flex1">
					<view class="shuoming_left_left">
						用法用量
					</view>
					<view class="shuoming_left_right">
						口服，成人，一次1片，一日2次
					</view>
				</view>
				<u-icon name="arrow-right" color="#000000" size="13"></u-icon>
			</view> -->
			<view class="kuaidi">
				<view @click="goMyaddress" class="kuaidi_item flex">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/wuliu.png" class="kuaidi_item_left" mode=""></image>
					<view class="kuaidi_item_min">
						<view class="kuaidi_item_min_top">
							送至
						</view>
						<view class="kuaidi_item_min_bottom">
							<!-- 北京市 朝阳区 建外solo天街大厦a座2505 -->
							{{address.city_text+' '+address.area_text+' '+address.address}}
						</view>
					</view>
					<u-icon name="arrow-right" color="#000000" size="13"></u-icon>
				</view>
				<view class="kuaidi_item flex">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/wuliu.png" class="kuaidi_item_left" mode=""></image>
					<view class="kuaidi_item_min1">
						<text v-for="(item,index) in labeL">{{item }} </text>
					</view>
				</view>
			</view>
			<view class="pingjia">
				<view class="pingjia_top flex">
					<view class="pingjia_left flex1">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pingjia.png" class="pingjia_left_img" mode=""></image>
						<view class="pingjia_left_text">
							评价
						</view>
					</view>
					<view class="pingjia_right flex1" @click="go_pingjia">
						<view class="pingjia_right_text">
							好评度{{good_rate}}%
						</view>
						<u-icon name="arrow-right" color="#000000" size="11"></u-icon>
					</view>
				</view>
				<view class="pingjia_label flex1">
					<view v-for="(item,index) in comment_tag" class="pingjia_label_item">
						{{item.name}}
					</view>
				</view>
				<view class="user_pl" v-for="(item,index) in comment">
					<view class="user_pl_user">
						<image class="user_pl_user_img" :src="ImgUrl+item.user.avatar" mode=""></image>
						<view class="user_pl_pl">
							<view class="user_pl_name">{{item.user.name}}</view>
							<u-rate size="10" inactiveColor="#626262" :readonly="true" gutter="2" activeColor="#DD504A" :count="count" v-model="item.star"></u-rate>
						</view>
					</view>
					<view class="pl_text">
						{{item.content}}
					</view>
					<view class="pingjia_img flex1">
						<image :src="ImgUrl+items"  class="pingjia_img_item" mode="" v-for="(items,indexs) in item.img"></image>
					</view>
				</view>
			</view>
			<view class="xiangqing" style="background: #fff;">
				<!-- <view class="xiangqing_top flex1">
					<image src="/static/image/xiangqing.png" class="xiangqing_top_img" mode=""></image>
					<view class="xiangqing_top_text">
						详情
					</view>
				</view> -->
				<rich-text class="piiu" :nodes="good_img"></rich-text>
				<!-- <view class="" style="font-size: 0;margin-top: 20rpx;">
					<image style="width: 100%;" v-for="(item,index) in good_img" :src="ImgUrl+item" mode="widthFix">
					</image>
				</view> -->
			</view>
		</view>
		<view class="bottom flex">
			<view class="bottom_btn" @click="determine">
				立即购买
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" round="16">
			<view class="guige">
				<u-icon name="close" class="guige_icon" color="#999999" size="18" @click="close"></u-icon>
				<view class="guige_shopinfo">
					<image :src="ImgUrl+list[0]" class="guige_shopinfo_img" mode=""></image>
					<view class="guige_shopinfo_right">
						<view class="list_item_price" style="color: #E5432E; align-items: baseline;">
							{{jifen}}
							<text class="fs-28">积分</text>
							<text style="margin: 0 10rpx;">+</text>
							<text class="fs-32">¥</text>
							<text class="fs-52">{{jiage | pointsPrice}}</text>
							<text class="fs-32">.{{jiage | pointsPrice(1)}}</text>
						</view>
						<view class="guige_shopinfo_right_bottom">
							规格:{{this.selectguige.replace(',','*')}}
						</view>
					</view>
				</view>
				<view class="guige_list">
					<view class="guige_list_item" v-for="(item,index) in guige">
						<view class="guige_list_item_title">
							{{item.title}}
						</view>
						<view class="guige_list_item_list">
							<view
								:class="[(selectguige.indexOf(items.lable)!=-1)?'guige_list_item_list_item_active':'guige_list_item_list_item']"
								v-for="(items,indexs) in item.list" @click="choose_lable(index,indexs)">
								{{items.lable}}
							</view>
						</view>
					</view>
				</view>
				<view class="jinbuqi">
					<view class="jinbuqi_left">
						数量
					</view>
					<u-number-box button-size="26" v-model="value" @change="valChange"></u-number-box>
				</view>
				<view class="guie_btn" @click="go_ConfirmOrder">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		pointsPrice
	} from '@/utils/util1.js'
	import {
		score_goods_detail,
		getcomment,
		address,
	} from '@/api/common.js'
	export default {
		data() {
			return {
				list:[],
				count:5,
				jiage:'12.80',
				jifen:'',
				name:'',
				fare:'',
				good_img: '',
				sold_num:'',
				stock_num:'',
				labeL:'',
				good_rate:'',
				comment_tag:'',
				comment:'',
				currentNum:1,
				show:false,
				guige: [],
				selectguige: '',
				guige2: [],
				value:1,
				id:'',
				address:'',
			}
		},
		computed: {
			ImgUrl(){
				console.log(this.$store.state.ImgUrl)
				return this.$store.state.ImgUrl
			},
		},
		filters: {
			pointsPrice
		},
		onLoad(options) {
			this.id = options.id;
			this.getscoregooddetail(this.id);
			this.getComment(this.id);
		},
		onShow() {
			address().then(res=>{
				for(let i=0;i<res.data.data.length;i++){
					if(res.data.data[i].is_default==1){
						this.address = res.data.data[i];
					}
				}
				if(this.address==''&&res.data.data[0]){
					this.address = res.data.data[0];
				}
			})
		},
		methods: {
			goMyaddress(){
				uni.navigateTo({
					url:'/pages/MyAddress/MyAddress'
				})
			},
			getComment(id){
				let data = {
					page:1,
					size:2,
					id
				}
				getcomment(data).then(res=>{
					console.log(res);
					this.comment = res.data.data;
				})
			},
			getscoregooddetail(id){
				score_goods_detail({id}).then(res=>{
					this.list = res.data.img;
					this.jiage = res.data.price;
					this.jifen = res.data.score;
					this.name = res.data.name;
					this.fare = res.data.fare;
					this.sold_num = res.data.sold_num;
					this.stock_num = res.data.stock_num;
					this.labeL = res.data.labeL;
					this.good_img = res.data.detail;
					this.good_rate = res.data.good_rate;
					// this.comment = res.data.comment;
					this.comment_tag = res.data.comment_tag;
					if (this.guige.length == 0) {
						for (let i = 0, len = res.data.spus.length; i < len; i++) {
							let obj = {
								id: 0,
								title: '',
								list: []
							}
							obj.id = res.data.spus[i].id;
							obj.title = res.data.spus[i].name;
							for (let j = 0, lens = res.data.spus[i].item_text.length; j < lens; j++) {
								let o = {
									lable: ''
								}
								if (j == 0) {
									this.selectguige += ',' + res.data.spus[i].item_text[0];
								}
								o.lable = res.data.spus[i].item_text[j];
								obj.list.push(o);
							}
							this.guige.push(obj);
						}
						this.selectguige = this.selectguige.replace(',', '');
						this.guige2 = res.data.skus;
						this.guige2 = res.data.skus;
						let temArr = this.selectguige.split(',');
						for (let j = 0, lens = this.guige2.length; j < lens; j++) {
							let arr = [];
							for (let i = 0, len = temArr.length;i<len; i++) {
								if(this.guige2[j].difference.indexOf(temArr[i])!=-1){
									arr.push(temArr[i])
								}
							}
							if(arr.length==temArr.length){
								this.jiage = this.guige2[j].price;
								this.sku_id = this.guige2[j].id;
								this.jifen = this.guige2[j].score;
								return;
							}
						}
					}
				})
			},
			swiper_change(e){
				this.currentNum = e.detail.current+1
			},
			close(){
				this.show = false
			},
			open(){
				this.show = true
			},
			determine(num){
				this.show = true
				// if(num == 1)console.log('加购物车')
				// if(num == 2)console.log('购物')
			},
			choose_lable(index,indexs){
				let temArr = this.selectguige.split(',');
				temArr[index] = this.guige[index].list[indexs].lable;
				this.selectguige = temArr.join(',');
				for (let j = 0, lens = this.guige2.length; j < lens; j++) {
					let arr = [];
					for (let i = 0, len = temArr.length;i<len; i++) {
						if(this.guige2[j].difference.indexOf(temArr[i])!=-1){
							arr.push(temArr[i])
						}
					}
					if(arr.length==temArr.length){
						this.jiage = this.guige2[j].price;
						this.jifen = this.guige2[j].score;
						this.sku_id = this.guige2[j].id;
						return;
					}
				}
			},
			valChange(e){
				console.log(e)
			},
			go_ConfirmOrder(){
				let obj = {
					drug_shop:this.drug_shop,
					img:this.list[0],
					fare:this.fare,
					jiage:this.jiage,
					selectguige:this.selectguige.replace(',','*'),
					is_prescription:this.is_prescription,
					goods_id:this.id,
					sku_id:this.sku_id,
					num:this.value,
					name:this.name,
					sore:this.jifen
				};
				// console.log(obj,'cs');
				// return;
				uni.navigateTo({
					url:'/pages/ConfirmOrder/ConfirmOrder?obj='+encodeURIComponent(JSON.stringify(obj))
				})
			},
			go_pingjia(){
				uni.navigateTo({
					url:'/pages/AllComments/AllComments?id='+this.id+'&type=0'
				})
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
		padding-bottom: 200rpx;
	}
	.swiper_view{
		width:100%;
		height: 628rpx;
		position: relative;
	}
	.swiper{
		width: 100%;
		height: 628rpx;
	}
	.swiper_img{
		width: 100%;
		height: 628rpx;
	}
	.swiper_currentNum{
		display: inline-flex;
		padding: 6rpx 20rpx;
		border-radius: 114rpx;
		background: rgba(0, 0, 0, 0.40);
		color: #FFF;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
	}
	.price_view{
		color: #E5432E;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: 700;
		margin-top: 30rpx;
	}
	.fs-52{
		font-size: 52rpx;
	}
	.fs-32{
		font-size: 32rpx;
	}
	.content{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.list_item_right_title{
		height: 80rpx;
		color: #333;
		text-overflow: ellipsis;
		font-family: Alibaba PuHuiTi 2.0;
		font-size:32rpx;
		font-weight: 400;
		margin-top: 20rpx;
	}
	.list_item_right_title_bq{
		display: inline-flex;
		padding: 2rpx 8rpx;
		border-radius: 8rpx 8rpx 0rpx 8rpx;
		background: linear-gradient(239deg, #FCF1CF 31.36%, #FAE6A5 68.64%);
		color: #5F360F;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 22rpx;
		font-weight: 400;
		margin-right: 5rpx;
	}
	.yf_view{
		margin-top: 16rpx;
	}
	.yf{
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.shuoming{
		width: 100%;
		/* height: 108rpx; */
		border-radius: 16rpx;
		background: linear-gradient(270deg, #DDEBFF 0%, #EBF3FF 100%);
		padding:20rpx 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
	.shuoming_left{
		width: 45%;
	}
	.shuoming_left_left{
		width: 60rpx;
		min-width: 60rpx;
		color: #9CABBE;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.shuoming_left_right{
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 10rpx;
	}
	.kuaidi{
		width: 100%;
		height: 216rpx;
		border-radius: 16rpx;
		background: #F8F8F8;
		margin-top: 20rpx;
	}
	.kuaidi_item:last-child{
		border: 0;
	}
	.kuaidi_item{
		width: 100%;
		height: 108rpx;
		border-bottom: 1rpx solid #EEE;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.kuaidi_item_left{
		min-width: 48rpx;
		width: 48rpx;
		height: 48rpx;
	}
	.kuaidi_item_min{
		width: 81%;
	}
	.kuaidi_item_min_top{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.kuaidi_item_min_bottom{
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.kuaidi_item_min1{
		width: 89%;
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.pingjia{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #F8F8F8;
		margin-top: 20rpx;
	}
	.pingjia_left_img{
		width: 48rpx;
		height: 48rpx;
	}
	.pingjia_left_text{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		height: 48rpx;
		line-height: 48rpx;
		margin-left: 20rpx;
	}
	.pingjia_right_text{
		color: #999;
		text-align: right;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-right: 8rpx;
	}
	.pingjia_label{
		margin-top: 20rpx;
		flex-wrap: wrap;
	}
	.pingjia_label_item{
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 400;
		margin-bottom: 10rpx;
		flex-shrink: 0;
		display: inline-block;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin-right: 30rpx;
		background: #EDEDED;
		border-radius: 64rpx;
	}
	.user_pl {
		margin-top: 30rpx;
	}
	.user_pl_user {
		display: flex;
		align-items: center;
	}
	.user_pl_user_img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background-color: #333;
	}
	.user_pl_name {
		color: var(--unnamed, #626262);
		font-family: Alibaba PuHuiTi 2;
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	.user_pl_pl {
		margin-left: 20rpx;
	}
	.pl_text {
		margin-top: 24rpx;
		color: #333;
		font-family: Alibaba PuHuiTi 2;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	.pingjia_img{
		margin-top: 20rpx;
	}
	.pingjia_img_item{
		width: 128rpx;
		height: 128rpx;
		border-radius: 8rpx;
		background:#ccc;
		margin-right: 8rpx;
	}
	.xiangqing{
		width: 100%;
		border-radius: 16rpx;
		background: #F8F8F8;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	.xiangqing_top_img{
		width: 48rpx;
		height: 48rpx;
	}
	.xiangqing_top_text{
		height: 48rpx;
		line-height: 48rpx;
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 20rpx;
	}
	.guige{
		width: 100%;
		height: 1128rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding:30rpx;
		box-sizing: border-box;
		position: relative;
	}
	.guige_icon{
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
	.bottom{
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.bottom_btn{
		width: 690rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 45rpx;
		background: #0165FB;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-style: normal;
		font-weight: 400;
	}
	.bottom_right_left_btn{
		display: inline-flex;
		padding: 18rpx 40rpx;
		border-radius: 68rpx;
		background: rgba(1, 101, 251, 0.10);
		color: #0165FB;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
		margin-right: 30rpx;
	}
	.bottom_left_item{
		width: 80rpx;
		height: 80rpx;
		margin-right: 30rpx;
	}
	.bottom_left_item_img{
		width: 48rpx;
		height: 48rpx;
		display: block;
		margin: 0 auto;
	}
	.bottom_left_item_text{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 400;
		text-align: center;
	}
	.guige_shopinfo{
		display: flex;
		align-items: center;
	}
	.guige_shopinfo_img{
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		background: #D9D9D9;
	}
	.guige_shopinfo_right{
		padding-top: 64rpx;
		margin-left: 20rpx;
	}
	.guige_shopinfo_right_bottom{
		color: #999;
		/* margin-top: 10rpx; */
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.guige_list_item_title{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 700;
		margin-top: 40rpx;
	}
	.guige_list_item_list{
		margin-top: 30rpx;
	}
	.guige_list_item_list_item{
		display: inline-flex;
		padding: 6rpx 24rpx;
		border-radius: 78rpx;
		background: #EDEDED;
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
		margin-right: 30rpx;
	}
	.guige_list_item_list_item_active{
		display: inline-flex;
		padding: 6rpx 24rpx;
		border-radius: 78rpx;
		background: #0165FB;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
		margin-right: 30rpx;
	}
	.jinbuqi{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	.jinbuqi_left{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 700;
		
	}
	
	/deep/.u-number-box__minus{
		width: 26px !important;
		background: #fff !important;
		border: 2rpx solid #EEEEEE;
	}
	/deep/.u-number-box__input{
		width: 26px !important;
		margin: 0 !important;
		border: 2rpx solid #EEEEEE;
		border-left: 0 !important; 
		border-right: 0 !important; 
		background: #fff !important;
	}
	/deep/.u-number-box__plus{
		width: 26px !important;
		background: #fff !important;
		border: 2rpx solid #EEEEEE;
	}
	/deep/.uni-input-input{
		font-size: 22rpx !important;
		color: #333 !important;
		font-weight: 400 !important;
	}
	/deep/.u-icon__icon {
		font-size: 22rpx !important;
	}
	/deep/.u-icon__icon {
		font-size: 22rpx !important;
	}
	.guie_btn{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 80rpx;
		background:#0165FB;
		position: absolute;
		left: 30rpx;
		bottom: 88rpx;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
	}
	.list_item_price{
		color: #E5432E;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 40rpx;
		font-weight: 600;
		margin-top: 30rpx;
	}
	.fs-28{
		font-size: 28rpx;
	}
</style>
